{% extends 'base.html' %}

{% block card_header %}
<span><a href="/index"> 图书借还 / </a></span><span>图书借阅</span>
{% endblock %}


{% block card_body %}

    <!-- 数据表格区域 -->
    <div style="margin-top: 20px">
        <table id="borrowlist" lay-filter="borrowlist"></table>
    </div>

    <div id="optionbtn" hidden>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal borrow">
        借出
        </button>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger deny">
        拒绝
        </button>
    </div>


{% endblock %}


{% block script %}
<script src="../static/layui/layui.js"></script>
<script src="../static/jquery/jquery.min.js"></script>
<script>
layui.use(['layer'], function(){
    var layer = layui.layer
    {% for message in get_flashed_messages() %}
        layer.msg('{{ message }}');
    {% endfor %}
});

layui.use('form', function(){
  var form = layui.form;
});

layui.use('table', function(){
  var table = layui.table;

  <!-- 表格渲染 -->
  table.render({
    elem: '#borrowlist'
    ,height: 450
    ,url: '{{ url_for('main.borrowlist_api') }}' //数据接口
    ,page: true //开启分页
    ,loading: true
    ,cols: [[ //表头
      {field: 'sno', title: '序号', width:80, fixed: 'left'}
      ,{field: 'name', title: '姓名', width:120, align:'center'}
      ,{field: 'id', title: '证件号', width:120, sort: true, align:'center'}
      ,{field: 'book_id', title: '图书编号', width:120, align:'center'}
      ,{field: 'bookname', title: '借阅书名', width:220, align:'center'}
      ,{field: 'author', title: '作者', width: 160, align:'center'}
      ,{field: 'press', title: '出版社', width: 160, sort: true, align:'center'}
      ,{field: 'opration', title: '操作', width: 160, align:'center', templet: '#optionbtn'}
    ]]
    //必须等表格渲染完成后才能绑定事件
    ,done:function (){
          $('tr').css({'background-color': '#333', 'color': '#fff'});
        //为内嵌按钮绑定事件
        $(".borrow").click(function(e) {
            var book_id = e.currentTarget.parentNode.parentNode.parentNode.childNodes[3].innerText
            console.log(book_id)
            $.post('{{ url_for('main.borrowok_api') }}', {book_id:book_id}, function(str){
                layui.use('layer',function (){
                    layer = layui.layer;
                    if(!str.status)
                    {
                        layer.msg('借出成功');
                        location.reload();
                    }
                    else
                        layer.msg('操作失败')
                });
            })

        })
        $(".deny").click(function(e) {
            var book_id = e.currentTarget.parentNode.parentNode.parentNode.childNodes[3].innerText
            console.log(book_id)
            layer.open({
                content: '确认拒绝？',
                yes: function(index, layero){
                    $.post('{{ url_for('main.borrowdeny_api') }}', {book_id:book_id}, function(str){
                        console.log('请求完毕')
                    })
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    location.reload();
                }
            });

        })
      }
  });

});
</script>
{% endblock %}